<template>
  <div>
    <div style="width: 84%;margin: auto;font-size:0.5rem;">
      <p class="p1">欢迎来到赛思医考帮</p>
      <p class="p2">为了账户安全，请您绑定您的手机号</p>
      <!-- <input type="number" pattern="\d*" placeholder="请输入您的手机号" class="input1" v-model="num" maxlength="11"> -->
			<!-- 请输入您的手机号 -->
			<div class="loginphone">
				<div class="phone-pic">
					<img src="../../../src/assets/img/person/shouji.png" alt="">
				</div>
				<input type="number" pattern="\d*" placeholder="请输入您的手机号" class="input1" v-model="num" maxlength="11">
			</div>
			<div class="loginphone logincode">
				<div class="loginph">
					<div class="phone-pic">
						<img src="../../../src/assets/img/person/yanzheng.png" alt="">
					</div>
					<input type="number" pattern="\d*" placeholder="请输入验证码" v-model="code" maxlength="11">
				</div>
				<div class="sendcode sendactive" v-if="bol">重新发送<span>({{t}}s)</span></div>
				<div class="sendcode" v-else @click="send()">发送验证码</div>
				<!-- <mt-button type="primary" v-if='bol' plain class="sendcode sendactive" :disabled="bol">重新发送({{t}}s)</mt-button>
				<mt-button type="primary" v-else plain class="sendcode" @click="send()" :disabled="bol">发送验证码</mt-button> -->
			</div>
			
			<!-- 请输入您的注册码 -->
			<!-- <div class="loginphone">
				<div class="phone-pic">
					<img src="../../../src/assets/img/person/zhuce.png" alt="">
				</div>
				<input type="text" pattern="\d*" placeholder="请输入注册码(选填)" class="input1" v-model="yaocode" maxlength="11">
			</div> -->
			
      <button  class="btn111" @click="enter()">登录</button>
      <div class="agre">
        <span @click="severclick()">《服务协议》</span>
        <span>客服电话：<a href="tel:15639255665">15639255665</a></span>
      </div>
			
			
		<!-- 注册码 -->
		<div class="shoewr-chenshi">
			<div class="chen-contener chen-textactiveshi">
				<p class="chen-title">提示</p>
				<p class="chen-text" style="text-align: left;padding-top: .4rem;">您已经绑定过其他注册码，暂时无法更换绑定。</p>
				<p class="chen-button-shiyes" @click="shishare()">确定</p>
			</div>
		</div>
			
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'
    export default {
        name: "Denglu",
      data(){
          return{
            num:'',
            code:'',
            t: '发送验证码',
            bol: false,
			tempid:'',
			// yaocode:'',
			oldid:'',
          }
      },
      methods:{
		  // 点击确定
		  shishare(){
				$('.shoewr-chenshi').fadeOut();
				this.$router.go(-1);
			},
          enter(){
            if (!(/^1\d{10}$/.test(this.num))) {
            // if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.num))) {
              this.$toast({
                message:'请输入正确的手机号',
                position:'bottom'
              });
            }else if (this.code=='') {
              this.$toast({
                message:'请输入验证码',
                position:'bottom'
              });
            }else{
              var that = this;
              var url = that.$store.state.url + "User/bindPhone"
              var data ={
              	tel:that.num,
              	code:that.code,
								tempid:that.tempid,
								// invite:that.yaocode,
								oldid:that.oldid,
              }
							// console.log(data)
              that.axios({
              	method:"POST",
              	url:url,
              	data:data,
              }).then(res=>{
              	// console.log(res);
              	var data = res.data;
              	if(data.errcode==0||data.errcode=='0'){
              		var token = data.data.token;
              		localStorage.setItem('token',token);
              		// this.i();
									
              		localStorage.setItem("phone",that.num);
					if(data.data.also_recom==0||data.data.also_recom=='0'){
						that.$toast({
							message:'绑定手机号成功！',
							position:'center'
						});
						setTimeout(function(){
							that.$router.go(-2)
						},1500)
					}else{
						$('.shoewr-chenshi').fadeIn();
					}
              		
              	}else{
              		that.$toast({
              	    message:data.msg,
              			position:'center'
                  });
              	}
              })
            }
          },
        send(){
            if ((/^1\d{10}$/.test(this.num))){
            // if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.num))){
              this.bol = true;
              var that = this;
              var time = 60;
							that.t = 60;
              var timer = setInterval(function () {
                time--;
                that.t = time

                if (time <= 0) {
                  clearInterval(timer);
                  that.t = '发送验证码';
                  that.bol = false;
                }
              }, 1000)
              that.axios.get(that.$store.state.url + "sms/getSmsCode",{
              	params:{
              		tel:that.num,
              	}
              }).then(res=>{
                if (res.data.errcode == 0||res.data.errcode == '0'){
                  // console.log(res.data)
                  this.$toast({
                    message:res.data.msg,
                    position:'bottom'
                  });
                }else {
                  this.$toast({
                    message:res.data.msg,
                    position:'bottom'
                  });
                }

              })

            }else {
              this.$toast({
                message:'请输入正确的手机号',
                position:'bottom'
              });

            }
        },
		severclick(){
			this.$router.push({
				path:'/severce'
			})
		},

      },
      mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
        if(this.$route.query.tempid){
			this.tempid = this.$route.query.tempid
		}
		
		if(this.$route.query.oldid){
			this.oldid = this.$route.query.oldid
		}
				// console.log(this.$route.query.va);
      },
    }
</script>

<style scoped>
	.loginphone{
		margin-top: .73rem;
		display: flex;
		justify-content: flex-start;
		border-bottom: 1px solid #EDEDED;
		padding-bottom: .18rem;
	}
	.phone-pic{ 
		width: .4rem;
		height: .4rem;
	}
	.phone-pic img{
		width: 100%;
		height: 100%;
		vertical-align: top !important;
	}
	.loginph{
		display: flex;
		justify-content: space-between;
	}
	
	.loginphone input{
		width: 5.5rem;
		padding-left: .2rem;
		line-height: .4rem;
	}
	.logincode input{
		width: 3.4rem !important;
	}
	.logincode img{
		vertical-align: middle !important;
	}
    .p1{
      font-weight:800;
      color:rgba(51,51,51,1);
      margin-top: 0.89rem;
    }
		.p2{
			color: #999999;
			font-size: .26rem;
			margin-top: .3rem;
		}
    input{
      border: none;
      outline: none;
      font-size: 0.3rem;
    }
		.logincode input{
			width: 3.4rem !important;
		}
		.sendcode{
			width: 2.6rem;
			height: .76rem;
			line-height: .76rem;
			text-align: center;
			color: #0287FF;
			border: 1px solid #0287FF;
			border-radius: .38rem;
			font-size: .3rem;
		}
		.sendcode.sendactive{
			border: 1px solid #EDEDED;
			background: #EDEDED;
			color: #999999;
		}
    /* .input1{
      width: 100%;
      height: 0.7rem;
      border-bottom: 0.01rem solid rgba(237,237,237,1);
      margin-top: 1.2rem;
    } */
  /* .input1::placeholder{
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
  } */
  .yanzheng{
    width: 100%;
    height: 0.9rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    margin-top: 0.4rem;
  }
  .yanzheng input{
    width: 50%;
    float: left;
    margin-top: 0.4rem;
  }
  .yanzheng input::placeholder{
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
  .btn22 {
    /* width:2.4rem; */
    height:0.76rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.38rem;
    font-size:0.3rem;
    font-weight:500;
    color:rgba(2,135,255,1);
    float: right;
    margin-bottom: 0.2rem;
		padding: 0 .26rem;
  }
	.btn22.btn22active{
		background: #EDEDED !important;
		color: #999999 !important;
		border: 1px solid #999999;
	}
  .btn111{
    width: 100%;
    height: 0.88rem;
    color: #fff;
    font-size: 0.3rem;
    border-radius:0.44rem;
    background:rgba(2,135,255,1);
    margin-top: 0.8rem;
    border: none;
  }
  .agre{
    text-align: center;
  }
  .agre span:nth-child(1){
    font-size:0.24rem;
    font-weight:500;
    color:rgba(2,135,255,1);
  }
    .agre span:nth-child(2){
      font-size:0.24rem;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    input:focus::placeholder{
      color: transparent;
    }
</style>
